<template>
    <div class=''>
        <h3>指令复习</h3>
        <!-- <ul>
            <li v-for="i in 10" :key="i" @click="handler(i)">{{i}}</li>
        </ul> -->

        <!-- <button @click="toggle">toggle</button> -->
        <button v-on:click="toggle">toggle</button>
        <div class="box" v-if="flag">
        </div>



        <button @click="changebg">改变背景</button>

        <!-- <div :class="{'bg':bgx}">1111</div>
        <div :class="{bg:bgx}">1111</div> -->


        <!-- 对象里的 key值加不加引号都是 字符串 -->

        <!-- <div :style="{background:'blue'}">2222</div> -->

        <ul>
            <li v-for="(item,index) in list" :key="index">姓名是：{{item.name}}</li>
        </ul>


    </div>
</template>

<script>
export default {
    data() {
        return {
            flag:true,
            box:"box",
            bgx:true,
            list:[{name:"小明"},{"name":"小红"}]

        };
    },
    mounted() {},
    methods: {
        handler(i){
            alert(i)
        },
        toggle(){
            this.flag=!this.flag
        },
        changebg(){
            this.bgx=!this.bgx
        }
    },
    components:{}
};
</script>

<style lang='scss'>
.box{
    width: 200px;
    height: 200px;
    background: #ccc;
}
.bg{
    background: red;
}
</style>
